<template>
<!-- 欢迎语规则管理---文字消息 -->
    <a-modal
      :title="title"
      :width="600"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
    >
      <div class="item" v-if="content.length !== 0">
        <div class="content">文字消息:</div>
        <div class="card-info" v-for="(item, index) in cardInfo" :key="index">
          <p v-html="formatCardInfo(item)"></p>
        </div>
      </div>

      <div  class="item" v-if="imageUrl.length !== 0 ">
        <div class="content">图片消息:</div>
        <img :src="imageUrl" alt="" class="content" v-for="imageUrl,index in imageUrl" :key="index">
      </div>

      <div v-for="miniProgramDto,index in miniProgramDto" :key="index">
        <div class="content">小程序卡片消息:</div>
        <div class="item" v-if="miniProgramDto.text !==''&& miniProgramDto.text !== undefined">
          <div class="content">{{miniProgramDto.text}}</div>
        </div>

        <div class="content" v-if="miniProgramDto.appId !=='' && miniProgramDto.appId !== undefined">APPID:{{miniProgramDto.appId}}</div>
        <div class="content" v-if="miniProgramDto.url !=='' && miniProgramDto.url !== undefined">路径:{{miniProgramDto.url}}</div>
        <div class="content" v-if="miniProgramDto.title !=='' && miniProgramDto.title !== undefined">标题:{{miniProgramDto.title}}</div>
        <div v-if="miniProgramDto.image !=='' && miniProgramDto.image !== undefined">
          <img :src="miniProgramDto.image" alt="" class="content">
        </div>
      </div>
    </a-modal>
</template>

<script>
  import { getWelcomeVoById  } from '@/api/marketingCenter/code'
  export default {
    name:'cc',
    components: {},
    data() {
      return {
        title: '',
        visible: false,
        confirmLoading: false,
        miniProgramDto:[],
        content: [],
        cardInfo: [],
        imageUrl: [],
      }
    },
    created() {
    },
    computed: {
      formattedCardInfo() {
        const lines = this.content.join("\n")
        let result = ""
        const parser = new DOMParser()
        const doc = parser.parseFromString(lines, "text/html")
        const nodes = doc.body.childNodes
        for (let i = 0; i < nodes.length; i++) {
          const node = nodes[i]
          if (node.nodeName === "#text") {
            result += node.textContent
          } else if (node.nodeName === "A") {
            result += `<a href="#">${node.textContent}</a>`
          }
        }
        return result
      }
    },
    methods: {
      formatCardInfo(item) {
        let result = ""
        const parser = new DOMParser()
        const doc = parser.parseFromString(item, "text/html")
        const nodes = doc.body.childNodes
        for (let i = 0; i < nodes.length; i++) {
          const node = nodes[i]
          if (node.nodeName === "#text") {
            result += node.textContent.replace(/\n/g, '<br>')
          } else if (node.nodeName === "A") {
            result += `<a href="#">${node.textContent}</a>`
          }
        }
        return result
      },
      add() {
        this.edit({})
      },
      getgetWelcomelist(id) {
        this.miniProgramDto= [],
        this.content= [],
        this.imageUrl= []
        getWelcomeVoById({id}).then(res => {
          if (res.code == 200) {
            res.data.itemList.forEach(el => {
              if (el.type == 1) {
                this.content.push(el.content)
                this.cardInfo = this.content
              } else if (el.type == 2) {
                this.imageUrl.push(el.imageUrl)
              } else if (el.type == 3) {
                this.miniProgramDto.push(el.miniProgramDto)
              } 
            });
          }
        })
      },
      edit(record) {
        this.getgetWelcomelist(record.id)
        this.visible = true
      },
      // 确定
      handleOk() {
        // this.confirmLoading = false
        this.close()
      },
      // 关闭
      handleCancel() {
        this.close()
      },
      close() {
        this.$emit('close')
        this.fileList = []
        this.visible = false
      },
    }
  }
</script>
<style scoped lang="less">
  div{
    img {
      width: 200px;
      height: 200px;
    }
  }
  .content {
    margin-bottom: 10px;
  }
  .item {
    margin-bottom: 30px;
  }
</style>